import BaseRenderer from "diagram-js/lib/draw/BaseRenderer";

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
  select as svgSelect,
  selectAll as svgSelectAll,
  clone as svgClone,
  clear as svgClear,
  remove as svgRemove,
} from "tiny-svg";
import store from "@/store";
import { customConfig, createArr } from "../utils/util";
import { is } from "bpmn-js/lib/util/ModelUtil";
const HIGH_PRIORITY = 1500;

export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer, modeling) {
    super(eventBus, HIGH_PRIORITY);
    this.bpmnRenderer = bpmnRenderer;
    this.modeling = modeling;
    // 已完成的id数组
    this.highLightedActivitiesIds = store.getters.highLightedActivitiesIds;
    // 正在进行的id数组
    this.runningActivitiesIds = store.getters.runningActivitiesIds;
  }
  canRender(element) {
    // ignore labels
    return !element.labelTarget;
  }
  /**
   * 自定义连接线的样式
   * @param {*} parentNode 当前元素的svgNode
   * @param {*} element
   * @returns
   */
  drawConnection(parentNode, element) {
    const line = this.bpmnRenderer.drawConnection(parentNode, element);
    // 给节点添加class以更改样式
    let className = this.highLightedActivitiesIds.includes(element.id)
      ? "djs-visual Activities"
      : this.runningActivitiesIds.includes(element.id)
      ? "djs-visual running"
      : "djs-visual unActivities";
    svgAttr(parentNode, "class", className);

    return line;
  }
  /**
   * 自定义节点图形
   * @param {*} parentNode 当前元素的svgNode
   * @param {*} element
   * @returns
   */
  drawShape(parentNode, element) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
    const { type, width, height, x, y } = element;
    if (type === "bpmn:ExclusiveGateway") {
      // 给节点添加class以更改样式
      // let className = highLightedActivitiesIds.includes(element.id)
      //   ? 'djs-visual gateway-grey'
      //   : 'djs-visual ungateway-grey';
      // console.log(className);
      // svgAttr(parentNode, 'class', className);
      svgAttr(parentNode, "class", "djs-visual gateway-grey");
      // 计数器，当匹配到就加1，匹配不到为0就默认图片
      // 判断当前的id是否在已完成或正在进行的id数组里，以添加不同的图片
      const isFinish =
        this.highLightedActivitiesIds.includes(element.id) ||
        this.runningActivitiesIds.includes(element.id);
      const attr = { x: -7, y: 5, width: 65, height: 42 };
      const customIcon = svgCreate("image", {
        ...attr,
        href: isFinish
          ? require("@/images/workflow/gateway.png")
          : require("@/images/workflow/ungateway.png"),
      });
      svgAppend(parentNode, customIcon);
      return customIcon;
    }
    // 根据不同节点添加相应图片
    if (type == "bpmn:UserTask" && !!element.businessObject.name) {
      // 获取label
      const text = svgSelect(parentNode, "text");
      const tspan = svgSelectAll(text, "tspan");
      // 偏移label
      const tspanText = element.businessObject.name;
      let len = tspanText.length;
      if (len > 5) {
        let textArr = createArr(tspanText, 0, 5, 5);
        textArr.map((item, index) => {
          if (tspan.length >= textArr.length) {
            tspan[index].innerHTML = textArr[index];
          } else {
            const num = textArr.length - tspan.length;
            let y = svgAttr(tspan[tspan.length - 1], "y");
            let ts = svgCreate("tspan", {
              x: 30,
              y: parseFloat(y) + 14.4,
            });
            svgAppend(text, ts);
            const newTspan = svgSelectAll(text, "tspan");
            newTspan[index].innerHTML = textArr[index];
          }
        });
        const newTspan = svgSelectAll(text, "tspan");
        newTspan.map((item) => {
          svgAttr(item, "x", 35);
        });
      } else {
        svgAttr(tspan[0], "x", 35);
      }
      // if (tspan?.length > 1) {
      //   svgAttr(tspan[0], 'x', 40);
      //   svgAttr(tspan[1], 'x', 25);
      //   // 重写label，换行
      //   if (tspanText.includes('（')) {
      //     console.log(tspanText);
      //     tspan[0].innerHTML = tspanText.split('（')[0];
      //     tspan[1].innerHTML = '（' + tspanText.split('（')[1];
      //   } else if (tspanText.includes('(')) {
      //     console.log(tspanText);
      //     tspan[0].innerHTML = tspanText.split('(')[0];
      //     tspan[1].innerHTML = '(' + tspanText.split('(')[1];
      //   }
      //   if (tspanText.split('（')[1]?.length < 5 || tspanText.split('(')[1]?.length < 5) {
      //     svgAttr(tspan[1], 'x', 35);
      //   }
      // } else {
      //   svgAttr(tspan[0], 'x', 35);
      // }
      // 判断当前的id是否在已完成或正在进行的id数组里，以添加不同的图片
      const isFinish =
        this.highLightedActivitiesIds.includes(element.id) ||
        this.runningActivitiesIds.includes(element.id);
      const attr = { x: width / 20, y: height / 3, width: 25, height: 25 };
      // 给节点添加class以更改样式
      let className = this.runningActivitiesIds.includes(element.id)
        ? "djs-visual running"
        : this.highLightedActivitiesIds.includes(element.id)
        ? "djs-visual Activities"
        : "djs-visual unActivities";
      svgAttr(parentNode, "class", className);
      // 计数器，当匹配到就加1，匹配不到为0就默认图片
      let count = 0;
      customConfig.map((item) => {
        if (element.businessObject.name.includes(item.labelKey)) {
          count++;
          const customIcon = svgCreate("image", {
            ...attr,
            href: isFinish ? item.url : item.unUrl,
          });
          svgAppend(parentNode, customIcon);
          return customIcon;
        }
        if (!count) {
          const customIcon = svgCreate("image", {
            ...attr,
            href: isFinish
              ? require("@/images/workflow/approve.png")
              : require("@/images/workflow/unapprove.png"),
          });
          svgAppend(parentNode, customIcon);
          return customIcon;
        }
      });
    }

    return shape;
  }

  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
}

CustomRenderer.$inject = ["eventBus", "bpmnRenderer", "modeling"];
